<template>
  <div class="class-page">
    <flModel
      title="标准实例"
      :list="modelList"
      :is-show="isShow"
      @isShowClose="isShowClose"
    />
    <div class="back-ground">
      <div class="type-content">
        <div class="content-list">
          <div class="content-title">
            标准的分类逻辑关系
          </div>
          <div class="content-around">
            <div
              v-for="(item,index) of infoList"
              :key="index"
              class="list-one"
            >
              <div class="flex align-center margin-top-sm">
                <div class="title-icon" />
                <div
                  class="one-title"
                  @click="handleGetListByName(item.data)"
                >
                  {{ item.name }}
				  <image class="dome-img" src="../static/icon/dianji@3x.png" mode=""></image>
                </div>
              </div>
              <div
                v-if="item.sub.name"
                class="margin-left flex align-center margin-top-sm"
              >
                <div class="around-icon" />
                <div
                  class="margin-left-sm"
                  @click="handleGetListByName(item.sub.data)"
                >
                  {{ item.sub.name }}
				  <image class="dome-img" src="../static/icon/dianji@3x.png" mode=""></image>
                </div>
              </div>
              <div
                v-if="item.sub.standard.standard_name && item.name !== '大类'"
                class="margin-left-xl flex align-center margin-top-sm"
              >
                <div class="around-icon" />
                <div
                  class="margin-left-sm"
                  style="width: 85%;font-size: 40rpx;color: #59AC35;"
                  @click="handleGetInfoByName(index)"
                >
                  标准查询 >
                </div>
              </div>
              <div v-if="item.name === '大类'" style="margin: 25rpx 0 0 30rpx">
                <div
                    class="margin-left-sm flex align-center"
                    @click="handleGetListByName(item.sub.sub.data)">
                  <div class="around-icon" />
                  <span class="margin-left-sm">{{item.sub.sub.name}}</span>
				  <image class="dome-img" src="../static/icon/dianji@3x.png" mode=""></image>
                </div>
                <div
                    class="margin-left-sm flex align-center"
                    style="width: 100%;font-size: 40rpx;margin: 15rpx 0 0 50rpx;color: #59AC35;"
                    @click="handleGetInfoByName(index)"
                >
                  <div class="around-icon" />
                  <span class="margin-left-sm">标准查询 ></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import flModel from "@/components/flModel";

export default {
	name: "ClassPage",
	components: {
		flModel
	},
	data() {
	  return {
			infoList:[],
			modelList:[],
			isShow:false
		};
	},
	methods: {
    handleGetInfoByName(index){
      wx.navigateTo({
        url: '/pages/homePage?indexBook=' + index
      })
    },
		isShowClose(){
			this.isShow = false;
		},
		handleGetList(){
			this.$api.userPortalGetLogic({}).then((res) => {
				this.infoList = res.data;
			});
		},
		async handleGetListByName(data){
		  this.isShow = true;
			this.modelList = data.filter(Boolean);
		}
	},
	onLoad(){
		this.handleGetList();
	}
};
</script>

<style scoped lang="scss">
	.dome-img {
		width: 34rpx;
		height: 30rpx;
		margin-left: 24rpx;
	}
  .class-page {
    min-height: 100%;
    .back-ground {
      z-index: -1;
      background-image: linear-gradient(#6ACC40,#59AC35) ;
      height: 300rpx;
    }
    .type-content {
      width: 100%;
      position: absolute;
      padding: 24rpx;
      background-color:transparent;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      .content-list {
        border-radius: 16rpx 16rpx 0 0;
        background-color: #FFFFFF;
        min-height: 100vh;
        .content-title {
          background-color: #FFFFFF;
          border-bottom: 2rpx #EEEEEE solid;
          border-radius: 16rpx 16rpx 0 0;
          padding: 24rpx;
          font-size: 40rpx;
          font-weight: 700;
        }
        .content-around {
          padding: 22rpx;
          .list-one {
            flex-direction: column;
            display: flex;
            font-size: 40rpx;
            font-weight: 700;
            .around-icon {
              background-color: #59AC35;
              border-radius: 25%;
              width: 8rpx;
              height: 8rpx;
            }
            .one-title {
              margin-left: 16rpx;
			  border-radius: 32rpx;	
			  padding: 4rpx 24rpx;
            }
            .title-icon {
              background-color: #59AC35;
              width: 8rpx;
              height: 24rpx;
              border-radius: 12rpx;
            }
          }
        }
      }
    }
  }
</style>
